<!-- 订单中心 -->
<template>
	<view class="container">
		<view style="padding-bottom:68upx;">
			<view>
				<u-tabs :list="tabList" :is-scroll="false" active-color="#EFB257 !important" :current="type"
					@change="orderStateChange"></u-tabs>
			</view>
			<view class="order-list-box">
				<view>
					<view class="item" v-for="(item, index) in list" :key="index" @click="itemTap(item.orderId,item)">
						<view class="order-list-top">
							<view class="top-l" @click.stop="goShop(item.shopId)">
								<image :src="item.shopLogo" class="shop-img"></image>
								<text class="shop-name">{{ item.shopName }}</text>
								<!-- <image src="https://ceres.zkthink.com/static/images/arrowRight.png" class="arrow-img"> -->
								<!-- </image> -->
							</view>
							<!--订单状态： 退款中 交易关闭 待付款 待发货 待收货 已完成-->
							<view class="order-status" v-if='item.state==1'>待付款
							</view>
							<view class="order-status" v-else-if='item.state==2'>待发货
							</view>
							<view class="order-status" v-else-if='item.state==3'>待收货
							</view>
							<view class="order-status" v-else-if='item.state==4'>已完成
							</view>
							<view class="order-status" v-else-if='item.state==5'>交易关闭
							</view>
							<!-- <view class="order-status"
                    v-else-if='item.state==6'>待成团
              </view> -->
							<view class="order-status" v-else-if='item.returnType==1'>退款中
							</view>
						</view>
						<view class="order-info-box">
							<view class="order-info">
								<view class="order-info-item" v-for="(proItem, pIndex) in item.skus" :key="pIndex">
									<image :src="proItem.image" class="product-img default-img"></image>
									<view class="info-box">
										<text class="product-name">{{ proItem.productName }}</text>
										<!-- <view class="product-sku">{{ proItem.value }}</view> -->
										<view class="price-sku-box">
											<view class="box-h flexwrap">
												<text class="product-price">
													<text class="fuhao">￥
													</text>
													{{ proItem.price }}
												</text>
												<text class="product-num">x {{ proItem.number }}</text>
											</view>
											<view v-if="list.commentId == 0 && item.state == 4" class="evaluate"
												@click.stop="evaluateTap(proItem,item.orderId)">去评价
											</view>
											<!--                      <view v-if="proItem.commentId != 0 && item.state == 4 && item.skus[0].ifAdd !== 1"
                            class="evaluate2"
                            @click.stop="evaluateTowTap(index,proItem.commentId)">追加评价
                      </view> -->
										</view>
									</view>
								</view>
								<view class="total-price-box">
									<text>合计：</text>¥{{ (item.orderPrice + item.logisticsPrice).toFixed(2) }}
<!-- 									优惠¥{{ item.discountPrice }}
									<block v-if="item.price > 0">
										，实付¥{{ item.price }}
									</block> -->
								</view>
							</view>
							<view class="btnBox flex-items" :class="{flexSpBetween: item.state==5 || item.state == 9}">
<!-- 								<view class="delIcon" v-if='item.state==5 || item.state == 9'
									@click.stop="delOrder(item.orderId)"></view> -->
								<view class="order-btn-box">
									<text class="btn l" v-if='item.state==1|| item.state == 6'
										@click.stop="cancelOrder(item.orderId,index)">取消订单
									</text>
									<!-- <text class="btn l" @click.stop="free" v-if="item.state==4">免费干洗</text> -->
									<!-- <text class="btn l" v-if='item.state==2' >提醒发货</text> -->
									<text class="btn r" v-if='item.state==1' @click.stop="payOrder(item,index)">立即付款
									</text>
									<text class="btn l"
										v-if="(item.state==3 || item.state==4) && ( item.afterState == 0 || item.afterState == 6) && item.skus[0].ifAdd !== 1"
										@click.stop="applyTap(item,index)">申请售后
									</text>
									<text class="btn r" v-if='item.state==3'
										@click.stop="confirmReceiptTap(item.orderId)">确认收货
									</text>
									<!-- <text class="btn r" v-if='item.skus[0].commentId == 0 && item.state == 4'
										@click.stop="evaluateTap(proItem,item.orderId)">去评价
									</text> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="ifEmpty" class="emptyOrder-box flex-items-plus flex-column">
					<image class="emptyOrder-img" src="https://ceres.zkthink.com/static/images/emptyOrderImg.png">
					</image>
					<label class="font-color-999 fs26 mar-top-30">你还没有订单哦～</label>
				</view>
			</view>
		</view>
		<u-popup class="pay-type-popup" v-model="showPayTypePopup" mode="bottom" border-radius="14"
			close-icon-pos="top-right" close-icon-size="20">
			<view class="pay-type-item">
				<radio-group @change="payTypeChange" v-model="paymentMode">
					<view class="pay-type-radio">
						<view class="pay-type-img">
							<img class="pay-type-img-inner" src="https://ceres.zkthink.com/static/images/alipay.png" />
						</view>
						<label class="pay-type-label">支付宝支付</label>
						<radio class="pay-type-radio-item" style="transform:scale(0.7)" :checked="paymentMode == 2"
							value="2" />
					</view>
					<view class="pay-type-radio">
						<view class="pay-type-img">
							<img class="pay-type-img-inner" src="https://ceres.zkthink.com/static/images/huabei.png" />
						</view>
						<label class="pay-type-label">花呗分期</label>
						<radio class="pay-type-radio-item" style="transform:scale(0.7)" :disabled="totalPrice < 0.03"
							:checked="paymentMode == 3" value="3" />
					</view>
				</radio-group>
				<view class="huabei-detail">
					<radio-group @change="huabeiPeriodChange" v-model="huabeiPeriod">
						<view class="period-radio">
							<view class="period-amount">
								<label class="period-each">￥ {{ fenqiFeeList[0]|clip2Decimal }}x3期</label>
								<label class="period-each-charge">手续费￥{{ chargeFeeList[0]|clip2Decimal }}/期</label>
							</view>
							<radio class="period-type-radio-item" style="transform:scale(0.7)"
								:disabled="fenqiDisabledList[0]" :checked="huabeiPeriod == 3" value="3" />
						</view>
						<view class="period-radio">
							<view class="period-amount">
								<label class="period-each">￥ {{ fenqiFeeList[1]|clip2Decimal }}x6期</label>
								<label class="period-each-charge">手续费￥{{ chargeFeeList[1]|clip2Decimal }}/期</label>
							</view>
							<radio class="period-type-radio-item" style="transform:scale(0.7)"
								:disabled="fenqiDisabledList[1]" :checked="huabeiPeriod == 6" value="6" />
						</view>
						<view class="period-radio">
							<view class="period-amount">
								<label class="period-each">￥ {{ fenqiFeeList[2]|clip2Decimal }}x12期</label>
								<label class="period-each-charge">手续费￥{{ chargeFeeList[2]|clip2Decimal }}/期</label>
							</view>
							<radio class="period-type-radio-item" style="transform:scale(0.7)"
								:disabled="fenqiDisabledList[2]" :checked="huabeiPeriod == 12" value="12" />
						</view>
					</radio-group>
				</view>
			</view>
			<view class="paytype-confirm">
				<view class="fenqi-total-amount" v-if="totalPrice >= 0.03 && paymentMode == 3">
					<label class="fenqi-all">分期总额 ￥{{ totalPrice|clip2Decimal }}</label>
					<label class="charge-fee-all">手续费 ￥{{ chargeFee|clip2Decimal }}</label>
				</view>
				<view class="fenqi-total-amount" v-if="paymentMode == 2">
					<label class="order-amount">订单总额 ￥{{ totalPrice|clip2Decimal }}</label>
				</view>
				<view class="fenqi-confirm">
					<text class="btn active" @click="continuePay">确认
					</text>
				</view>
			</view>
		</u-popup>
		<!-- 送洗 -->
		<u-popup v-model="goodsDetailShowFlag" mode="bottom" border-radius="14">
			<view class="popupWrap">
				<view class="popupWrapTitle">
					<view class="popupWrapTitleItem" @click="freeClick(1)">
						<view :class="freeIndex==1?'popupWrapTitleItemName active':'popupWrapTitleItemName'">自主送洗</view>
						<view v-if="freeIndex==1" class="popupWrapTitleItemBorder"></view>
					</view>
					<view class="popupWrapTitleItem" @click="freeClick(2)">
						<view :class="freeIndex==2?'popupWrapTitleItemName active':'popupWrapTitleItemName'">上门取衣</view>
						<view v-if="freeIndex==2" class="popupWrapTitleItemBorder"></view>
					</view>
				</view>
				<view class="popupWrapContent" v-if="freeIndex==1">
					<view :class="clickIndex==index?'popupWrapContentItem active':'popupWrapContentItem'" v-for="(item,index) in freeList" :key="index" @click="selectTab(index)">
						<view class="popupWrapContentItemName">{{item.shopName}}</view>
						<view class="popupWrapContentItemText">地址：{{item.cleanAddress}}</view>
						<view class="popupWrapContentItemText">联系电话：{{item.chargePersonPhone}}</view>
					</view>
				</view>
				<view v-if="freeIndex==2">
					<view style="height: 590upx;margin-top: 32upx;overflow: auto;">
						<view class="address-box" :style="{border:addIndex==index?'1px solid #EFB257':'1px solid #DCDCDC'}"  @click="addAddressTap(index)" v-for="(item,index) in userAddressInfo" :key="index">
							<view class="address-r">
								<view class="address-name-box">
									<text>{{item.receiveName}}</text>
									<text class="phone">{{item.receivePhone}}</text>
								</view>
								<view class="address-info">
									<text>{{item.receiveAdress}} {{item.address}}</text>
								</view>
							</view>
							<!-- <image src="https://ceres.zkthink.com/static/images/arrowRight.png" class="arrow-right-img"></image> -->
						</view>
					</view>
				</view>
				<view class="popupWrapBtn" @click="ClickcleanAdd">确认选择</view>
			</view>
		</u-popup>
		<!-- 取消订单 -->
		<tui-modal :show="closeTips" :custom="true" :fadein="true">
			<view class="Put-box1">
				<view class="text-align fs34 fs-bold">
					温馨提示
				</view>
				<view class="mar-top-40 text-align">
					您确定要取消该订单吗？
				</view>
				<view class="flex-display flex-sp-between">
					<view class="btn" @click="closeTips = false">
						点错了
					</view>
					<view class="btn submit" @click="doCancel">
						确定取消
					</view>
				</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import tuiModal from "@/components/modal/modal";

	const NET = require('../../utils/request')
	const API = require('../../config/api')
	// #ifdef H5
	var jweixin = require('jweixin-module')
	// #endif
	export default {
		components: {
			tuiModal
		},
		data() {
			return {
				type: 0,
				page: 1,
				goodsDetailShowFlag:false,
				freeIndex:1,
				freeList:[],//干洗商家列表
				userAddressInfo:[],
				clickIndex:0,
				addIndex:0,
				pageSize: 20,
				list: [],
				scrollLeft: 0,
				tabList: [{
					name: '全部',
					number: 0
				}, {
					name: '待付款',
					number: 1
				}, {
					name: '待发货',
					number: 2
				}, {
					name: '待收货',
					number: 3
				}, {
					name: '已完成',
					number: 4
				}, ],
				listTotal: 0,
				loadingType: 0,
				orderState: '',
				paymentMode: 2,
				showPayTypePopup: false,
				chargeFee: 0,
				totalPrice: 0,
				huabeiPeriod: -1,
				fenqiFeeList: [0, 0, 0],
				chargeFeeList: [0, 0, 0],
				fenqiDisabledList: [true, true, true],
				huabeiChargeType: 1,
				huabeiFeeRateList: [0, 0, 0],
				alipayInfo: {},
				ifEmpty: false,
				closeTips: false,
				currentOrderId: null,
				currentIndex: null
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type,
					this.orderState = options.type
				this.getListData()
			} else {
				this.getListData()
			}
			this.getSjlist()
			this.getHuabeiFeeRateList()
		},
		onReachBottom() {
			if (this.loadingType == 1) {
				uni.stopPullDownRefresh()
			} else {
				this.page = this.page + 1
				this.getListData()
			}
		},
		onBackPress(e) {
			if (e && e.from === 'navigateBack') {
				return false;
			}
			this.back();
			return true;
		},
		methods: {
			//去商品详情
			free(){
				this.goodsDetailShowFlag = true
			},
			addAddressTap(index) {
				this.addIndex = index
			},
			freeClick(index){
				this.freeIndex = index
			},
			selectTab(index){
				this.clickIndex = index
			},
			ClickcleanAdd(){
				if(this.freeIndex == 1){
					NET.request(API.cleanAdd+'?shopId='+ this.freeList[this.clickIndex].shopId+'&type=0', 'GET').then(res => {
						// uni.hideLoading()
						console.log(res)
						if(res.code=='200'){
							uni.redirectTo({
								url:'/pages_category_page1/tabbar/measure/result?code=2'
							})
						}
					}).catch(res => {
						
						// uni.hideLoading()
					})
				}else{
					NET.request(API.cleanAdd+'?receiveId='+ this.userAddressInfo[this.addIndex].receiveId+'&shopId='+ this.freeList[this.clickIndex].shopId+'&type=1', 'GET').then(res => {
						// uni.hideLoading()
						console.log(res)
						if(res.code=='200'){
							uni.redirectTo({
								url:'/pages_category_page1/tabbar/measure/result?code=2'
							})
						}
					}).catch(res => {
						
						// uni.hideLoading()
					})
					
				}
				
			},
			getSjlist(){
				NET.request(API.cleanList, 'GET').then(res => {
					// uni.hideLoading()
					console.log(res)
					this.freeList = res.data
					if (uni.getStorageSync('receiveItem')) {
						let receiveItem = uni.getStorageSync('receiveItem')
						this.userAddressInfo = receiveItem
						this.receiveId = receiveItem.receiveId
						this.userAddressInfo.receivePhone = hidden(this.userAddressInfo.receivePhone, 3, 4)
					} else {
						uni.showLoading({
							mask: true,
							title: '加载中...',
						})
						NET.request(API.QueryMemberAddres, {
							page: this.page,
							pageSize: this.pageSize
						}, "GET").then(res => {
							this.userAddressInfo = res.data.list
							if (res.data.list.length == 0) {
								this.page = this.page
							}
							for (let i = 0; i < res.data.list.length; i++) {
								this.addresList.list[i].username1 = this.addresList.list[i].receiveName.slice(0, 1)
							}
							this.userAddressInfo = this.userAddressInfo.concat(res.data.list)
							this.userAddressInfo.forEach((item) => {
								item.receivePhone = hidden(item.receivePhone, 3, 4)
							})
							uni.hideLoading();
						}).catch(err => {
							console.log(err)
							uni.hideLoading();
						})
					}
				}).catch(res => {
					
					// uni.hideLoading()
				})
			},
			againCollage(productId, shopId, skuId) {
				uni.navigateTo({
					url: '../goodsModule/goodsDetails?productId=' + productId + '&shopId=' + shopId + '&skuId=' +
						skuId
				})
			},
			goInviteSpll(collageId, orderId, productId, skuId, shopGroupWorkId) {
				uni.navigateTo({
					url: '../goodsModule/inviteSpell?collageId=' + collageId + '&orderId=' + orderId + '&type=1' +
						'&productId=' + productId + '&skuId=' + skuId + '&shopGroupWorkId=' + shopGroupWorkId

				})
			},
			back() {
				uni.switchTab({
					url: '../../pages/tabbar/user/index'
				});
			},
			//退款详情
			refundDetail(item) {
				uni.navigateTo({
					url: 'refundDetails?item=' + JSON.stringify(item)
				})
			},
			orderStateChange(index) {
				this.type = index;
				this.orderState = this.tabList[index].number
				this.page = 1
				this.list = []
				this.ifEmpty = false
				this.getListData()
			},
			// 订单列表数据
			getListData() {
				if (this.orderState == 0) {
					this.orderState = ''
				}
				uni.showLoading({
					mask: true,
					title: '加载中...',
				})
				NET.request(API.FindOrderList, {
					state: this.orderState,
					page: this.page,
					pageSize: this.pageSize
				}, 'GET').then(res => {
					if (res.data.list.length == 0) {
						this.loadingType = 1
						this.page = this.page
					}
					uni.hideLoading()
					this.listTotal = res.data.total
					this.list = this.list.concat(res.data.list)
					if (this.list.length === 0) {
						this.ifEmpty = true
					}
				}).catch(res => {
					uni.hideLoading()
				})
			},
			cancelOrder(orderId, index) {
				this.currentOrderId = orderId
				this.currentIndex = index
				this.closeTips = true
			},
			doCancel() {
				this.closeTips = false
				uni.showLoading({
					mask: true,
					title: '提交中...',
				})
				NET.request(API.CancelOrder, {
					orderId: this.currentOrderId
				}, 'POST').then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '取消成功',
					})
					setTimeout(() => {
						// this.type = 0
						// this.orderState = 0
						this.page = 1
						this.list = []
						this.currentOrderId = null
						this.currentIndex = null
						this.getListData()
					}, 1500);

				}).catch(res => {
					uni.hideLoading()
				})
			},
			goLogisticsTap(express, deliverFormid) {
				uni.navigateTo({
					url: 'logisticsInfo?express=' + express + '&deliverFormid=' + deliverFormid
				})
			},
			confirmReceiptTap(orderId) {
				uni.showModal({
					title: '温馨提示',
					content: '确定您已经收到货物，否则会造成财产损失',
					confirmText: '确定收到',
					cancelText: '点错了',
					success: res => {
						if (res.confirm) {
							this.doConfirm(orderId)
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			doConfirm(orderId) {
				NET.request(API.ConfirmReceive, {
					orderId: orderId
				}, 'POST').then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '确认成功',
					})
					setTimeout(() => {
						this.type = 4;
						this.orderState = 4
						this.page = 1
						this.list = []
						this.getListData()
					}, 1500);
				}).catch(res => {
					uni.hideLoading()
				})
			},
			delOrder(orderId) {
				uni.showModal({
					title: '温馨提示',
					content: '您确定要删除该订单吗？',
					confirmText: '确定删除',
					cancelText: '点错了',
					success: res => {
						if (res.confirm) {
							this.doDel(orderId)
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			doDel(orderId) {
				uni.showLoading({
					title: '提交中...',
				})
				NET.request(API.DelOrder, {
					orderId: orderId
				}, 'POST').then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '删除成功',
					})
					setTimeout(() => {
						// this.type = 0;
						// this.orderState = 0
						this.page = 1
						this.list = []
						this.getListData()
					}, 1500);

				}).catch(res => {
					uni.hideLoading()
				})
			},
			// 跳转订单详情
			itemTap(orderId, item) {
				uni.setStorageSync("afterapplyItem", item)
				uni.navigateTo({
					url: 'orderDetails?orderId=' + orderId
				})
			},
			goShop(id) {
				uni.navigateTo({
					url: "../store/index?storeId=" + id
				})

			},
			applyTap(item, index) {
				// 申请售后
				uni.navigateTo({
					url: 'afterSaleApply?item=' + JSON.stringify(item)
				})
			},
			payOrder(item, index) {
				// #ifdef MP-ALIPAY
				this.showPayTypePopup = true
				this.totalPrice = item.orderPrice
				// #endif
				// #ifndef MP-ALIPAY
				uni.showLoading({
					title: '订单提交中...',
				})
				// #endif
				let submitResult = {
					collageId: item.collageId,
					money: item.orderPrice,
					orderId: item.orderId,
					type: 2
				}
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					this.payRequest(submitResult)
				} else {
					NET.request(API.gotoH5Pay, submitResult, 'POST').then(res => {
						//console.dir(res)
						location.replace(res.data.mwebUrl)
						// window.location.replace(url)
					}).catch(err => {
						this.submitActive = true
						uni.hideLoading()
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					})
				}
				// #endif
				// #ifdef MP-ALIPAY
				this.alipayInfo = submitResult
				// #endif
				// #ifdef MP-WEIXIN
				let that = this
				NET.request(API.gotoPay, submitResult, 'POST').then(res => {
					console.log(item, 'item订单提交9999')
					console.log(res, 'res订单提交9999')
					let param = {
						orderId: item.orderId,
						collageId: item.collageId
					}
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: (payRes) => {
							// 拼团支付成功回调
							if (param.collageId) {
								NET.request(API.paySuccess, param, 'POST').then(res => {
									console.log(res, '支付成功')
								})
							}
							uni.showToast({
								icon: 'none',
								title: '支付成功'
							})
							this.type = 0
							this.page = 1
							this.orderState = ''
							this.list = []
							this.getListData()
						},
						fail: function(err) {
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
						}
					})
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				})
				// #endif
				// #ifdef APP-PLUS
				NET.request(API.gotoAppPay, submitResult, 'POST').then(res => {
					var obj = {
						appid: res.data.appId,
						noncestr: res.data.nonceStr,
						package: 'Sign=WXPay',
						prepayid: res.data.prepayId,
						timestamp: res.data.timeStamp,
						sign: res.data.paySign,
						partnerid: res.data.partnerId
					}
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: obj,
						success: (payRes) => {
							uni.showToast({
								icon: 'none',
								title: '支付成功'
							})
							this.type = 0
							this.page = 1
							this.orderState = ''
							this.list = []
							this.getListData()

						},
						fail: function(err) {
							console.log(err)
							uni.showToast({
								icon: 'none',
								title: '支付取消'
							})
						}
					})
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				})
				// #endif
			},
			continuePay() {
				uni.showLoading({
					title: '加载中...',
				})
				const payInfo = Object.assign({}, this.alipayInfo, {
					'paymentMode': this.paymentMode,
					'huabeiPeriod': this.huabeiPeriod
				});
				this.aliPay(payInfo)
			},
			// 支付宝支付
			aliPay(payInfo) {
				NET.request(API.gotoPay, payInfo, 'POST').then(res => {
					console.log('alipay gotoPay-----------')
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res.data.tradeNo,
						success: (payRes) => {
							uni.hideLoading()
							if (payRes.resultCode == '6001') {
								uni.showToast({
									icon: 'none',
									title: '取消支付'
								})
							}
							if (payRes.resultCode == '9000') {
								uni.showToast({
									icon: 'none',
									title: '支付成功'
								})
								uni.navigateTo({
									url: 'index?type=0'
								})
							}
						},
						fail: function(err) {
							uni.showToast({
								icon: 'none',
								title: '支付取消'
							})
						}
					});
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				})
			},
			// H5支付微信内置浏览器支付
			payRequest(payInfo) {
				payInfo.paymentMode = 1
				NET.request(API.gotoPay, payInfo, 'POST').then(res => {
					jweixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.paySign, // 必填，签名，见附录1
						jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
					});
					jweixin.ready(function() {
						jweixin.checkJsApi({
							jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
							success: function(res) {
								// console.log('checkjsapi Success')
								// console.log(res);
							},
							fail: function(res) {
								// console.log('res')
								// console.log(res);
							}
						});
						jweixin.chooseWXPay({
							timestamp: res.data
								.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
							nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
							package: res.data
								.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
							signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
							paySign: res.data.paySign, // 支付签名
							success: function(res) {
								// 支付成功后的回调函数
								uni.showToast({
									icon: 'none',
									title: '支付成功'
								})
								uni.navigateTo({
									url: 'index?type=0'
								})
							},
							cancel: function(r) {
								uni.showToast({
									icon: 'none',
									title: '取消支付'
								})
							},
							fail: function(res) {
								uni.showToast({
									icon: 'none',
									title: '支付失败'
								})
							}
						});
					});
					jweixin.error(function(res) {
						console.log('error')
						console.log(res)
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '支付失败了',
							duration: 3000
						});
					});
				}).catch(err => {
					uni.hideLoading()
				})
			},
			evaluateTap(item, orderId) {
				uni.setStorageSync('evaluateItem', item)
				uni.setStorageSync('orderId', orderId)
				uni.navigateTo({
					url: '../goodsModule/evaluate',
				})
			},
			evaluateTowTap(index, commentId) {
				console.log(commentId, 444)
				uni.setStorageSync('addCommentVOList', this.list[index]);
				uni.navigateTo({
					url: '../goodsModule/addEvaluate?type=1&commentId=' + commentId
				})
			},
			payTypeChange(event) {
				this.paymentMode = event.target.value;
				if (this.paymentMode == 2) {
					this.huabeiPeriod = -1
					this.fenqiDisabledList = [true, true, true]
				} else {
					this.huabeiPeriod = 3
				}
				this.recalcHuabei()
			},
			recalcHuabei() {
				if (this.paymentMode == 3) {
					this.fenqiFeeList[0] = this.totalPrice * (1 + this.huabeiFeeRateList[0] / 100) / 3
					this.fenqiFeeList[1] = this.totalPrice * (1 + this.huabeiFeeRateList[1] / 100) / 6
					this.fenqiFeeList[2] = this.totalPrice * (1 + this.huabeiFeeRateList[2] / 100) / 12

					this.chargeFeeList[0] = this.totalPrice * (this.huabeiFeeRateList[0] / 100) / 3
					this.chargeFeeList[1] = this.totalPrice * (this.huabeiFeeRateList[1] / 100) / 6
					this.chargeFeeList[2] = this.totalPrice * (this.huabeiFeeRateList[2] / 100) / 12

					var index = 0;
					if (this.huabeiPeriod == 6) {
						index = 1
					} else if (this.huabeiPeriod == 12) {
						index = 2
					}
					this.chargeFee = (this.totalPrice * (this.huabeiFeeRateList[index] / 100))
						.toFixed(2)

					if (this.totalPrice >= 0.03) {
						this.fenqiDisabledList[0] = false
					}
					if (this.totalPrice >= 0.06) {
						this.fenqiDisabledList[1] = false
					}
					if (this.totalPrice >= 0.12) {
						this.fenqiDisabledList[2] = false
					}
				}
			},
			// 花呗分期数变更
			huabeiPeriodChange(event) {
				this.huabeiPeriod = event.target.value
				this.recalcHuabei()
			},
			// 查询花呗分期配置
			getHuabeiFeeRateList() {
				NET.request(API.GetHuabeiConfig, {}, 'GET').then(res => {
					this.huabeiChargeType = res.data.huabeiChargeType
					if (this.huabeiChargeType == 2) {
						this.huabeiFeeRateList = res.data.huabeiFeeRateList
					}
				})
			}
		},
		filters: {
			clip2Decimal(value) {
				if (value === undefined || value === null) {
					return "0.00"
				}
				return (parseInt(value * 100) / 100).toFixed(2)
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: #f6f6f6;
	}
	.popupWrap{
		height: 826upx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 30upx;
		.popupWrapTitle{
			display: flex;
			.popupWrapTitleItem{
				margin-right: 32upx;
				.popupWrapTitleItemName{
					color: #333333;
					font-size: 28upx;
				}
				.active{
					font-size: 32upx !important;
					color: #EFB257 !important;
				}
				.popupWrapTitleItemBorder{
					width: 32upx;
					height: 4upx;
					background-color: #EFB257;
					margin: 0 auto;
					margin-top: 8upx;
				}
			}
		}
		.popupWrapContent{
			width: 690upx;
			height: 590upx;
			margin: 0 auto;
			margin-top: 32upx;
			overflow: auto;
			.active{
				border-color: #EFB257 !important;
			}
			.popupWrapContentItem{
				width: 100%;
				border: 1px solid #DCDCDC;
				border-radius: 16upx;
				box-sizing: border-box;
				padding: 24upx;
				margin-bottom: 24upx;
				.popupWrapContentItemName{
					font-size: 32upx;
					color: #333;
				}
				.popupWrapContentItemText{
					font-size: 28upx;
					color: #999;
					margin-top: 16upx;
				}
			}
		}
		.popupWrapBtn{
			width: 702upx;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			background-color: #EFB257;
			border-radius: 100upx;
			color: #fff;
		}
	}
	.flexwrap{
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.nav-box-box {
		height: 88upx;
		background: #f6f6f6;
		white-space: nowrap;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
	}

	.nav-box-box .item {
		display: inline-view;
		padding: 0 30upx;
		box-sizing: border-box;
		height: 88upx;
		text-align: center;
		line-height: 88upx;
		font-size: 30upx;
		color: #666;
		font-weight: 500;
	}

	.nav-box-box .item.active text {
		display: inline-view;
		color: #ff7911;
		box-sizing: border-box;
		height: 88upx;
		border-bottom: 2px solid #ff7911;
	}

	.order-list-box {
		width: 690upx;
		margin: 0 auto;
		margin-top: 24upx;
		// padding: 20upx 30upx 0;
		box-sizing: border-box;
	}

	.order-list-box .item {
		margin-bottom: 20upx;
		background: #fff;
		border-radius: 10upx;
		border-radius: 16upx;
		padding-bottom: 24upx;
	}

	.order-list-top {
		height: 96upx;
		padding: 0 30upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		// border-bottom: 1px solid #eee;
	}

	.top-l {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.shop-img {
		width: 48upx;
		height: 48upx;
		margin-right: 16upx;
		border-radius: 8upx;
	}

	.shop-name {
		font-size: 28upx;
		color: #333;
	}

	.arrow-img {
		margin-left: 15upx;
		width: 25upx;
		height: 25upx;
	}

	.order-status {
		font-size: 28upx;
		color: #EFB257;
		font-weight: 400;
	}

	.order-info-box {
		padding: 0 24upx;
		box-sizing: border-box;

		.btnBox {
			width: 100%;
			justify-content: flex-end;
			margin-top: 32upx;
			.delIcon {
				width: 40rpx;
				height: 40rpx;
				background: url("https://ceres.zkthink.com/static/images/delListOrder.png") no-repeat center center;
				background-size: contain;
			}
		}

		.flexSpBetween {
			justify-content: space-between;
		}
	}

	.order-info {
		// border-bottom: 1px solid #eee;
	}

	.order-info-item {
		display: flex;
		flex-direction: row;
		margin-top: 28upx;
	}

	.product-img {
		width: 160upx;
		height: 160upx;
		margin-right: 30upx;
		border-radius: 16upx;
	}

	.info-box {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.product-name {
		font-size: 28upx;
		color: #333;
		height: 68upx;
		line-height: 34upx;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.price-sku-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.product-sku {
		font-size: 24upx;
		color: #999;
	}

	.product-price {
		font-size: 28upx;
		color: #EF1414;
		font-weight: bold;
	}
	.address-box {
		margin-top: 20upx;
		background: #fff;
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 16upx;
	}
	
	.address-box .address-img {
		width: 70upx;
		height: 70upx;
		margin-right: 20upx;
	}
	
	.address-box .address-r {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 28upx;
		color: #333;
	}
	.product-price .fuhao {
		font-size: 24upx;
		color: #EF1414;
	}

	.product-num {
		display: inline-view;
		font-size: 32upx;
		margin-left: 20upx;
		color: #333;
	}

	.total-price-box {
		font-size: 32upx;
		color: #EF1414;
		text-align: right;
		margin-top: 24upx;
		font-weight: bold;
		text{
			font-size: 24upx;
			color: #333333 ;
			font-weight: 400;
		}
	}

	.order-btn-box {
		// padding: 20upx 0;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.order-btn-box .btn {
		height: 62upx;
		padding: 0 32upx;
		text-align: center;
		border-radius: 94upx;
		line-height: 62upx;
		font-size: 26upx;
		color: #333;
		margin-left: 20upx;
	}

	.evaluate {
		height: 56upx;
		text-align: center;
		line-height: 56upx;
		font-size: 26upx;
		padding: 0 30upx;
		color: #EFB257;
		background: #333333;
	}

	.evaluate2 {
		height: 56upx;
		text-align: center;
		line-height: 56upx;
		font-size: 26upx;
		padding: 0 30upx;
		background: #333333;
		color: #EFB257;
	}

	.order-btn-box .btn.l {
		background-color: #333334;
		color: #EFB257 ;
	}

	.order-btn-box .btn.r {
		background-color: #EFB257;
		color: #fff;
	}

	.emptyOrder-box {
		margin-top: 70upx;

		.emptyOrder-img {
			margin-top: 30%;
			width: 216upx;
			height: 152upx;
		}
	}

	.pay-type-item {
		.pay-type-radio {
			background-color: white;
			border-bottom: 1upx solid #EDEDED;
			margin-bottom: 20upx;
			padding: 24upx 20upx 24upx 20upx;

			.pay-type-img {
				display: inline-block;

				.pay-type-img-inner {
					width: 50upx;
					height: 50upx;
					vertical-align: middle;
				}
			}

			.pay-type-label {
				vertical-align: middle;
				margin-left: 30upx;
			}

			.pay-type-radio-item {
				float: right;
				margin-right: 20upx;
				width: 50upx;
				height: 50upx;
			}
		}

		.huabei-detail {
			margin-top: 20upx;

			.fenqi-wenzi {
				display: inline-block;
				margin-left: 64upx;
			}

			.fenqi-amount {
				display: block;
				margin-left: 64upx;
				margin-top: 14upx;
				color: #BABBBC;
			}

			.fenqi-charge-fee {
				float: right;
				margin-right: 68upx;
				color: #BABBBC;
			}

			.fenqi-modal {
				width: 40upx;
				height: 40upx;
				margin-left: 20upx;
				float: right;
				position: relative;
				top: -80upx;
			}
		}
	}

	.paytype-confirm {
		height: 120upx;
		padding: 0upx 108upx 0upx 32upx;

		.fenqi-all {
			display: inline-block;
			width: 100%;
		}

		.fenqi-total-amount {
			width: 65%;
			float: left;
		}

		.fenqi-confirm {
			float: right;
			width: 160upx;
			padding: 0upx 20upx;

			.btn {
				width: 216upx;
				height: 80upx;
				line-height: 80upx;
				border-radius: 40upx;
				font-size: 28upx;
				text-align: center;
				background: linear-gradient(90deg, rgba(255, 162, 0, 1), rgba(255, 121, 17, 1));
				color: #fff;
				display: inline-block;
				margin-right: 66upx;
			}
		}
	}

	.period-radio {
		margin: 30upx;
		padding-right: 100upx;
		width: 95%;
		border-bottom: 1px solid #EFEFEF;

		.period-amount {
			display: inline-block;

			.period-each-charge {
				display: inline-block;
				margin-top: 12upx;
				margin-left: 6upx;
				font-size: 26upx;
				color: #b7b7b7;
				margin-bottom: 13upx;
			}
		}

		.period-each {
			display: block;
		}

		.period-type-radio-item {
			float: right;
		}
	}

	.Put-box1 {
		.btn {
			text-align: center;
			margin-top: 40rpx;
			border: 2rpx solid #333333;
			height: 80rpx;
			line-height: 80rpx;
			width: 240rpx;
			color: #333333;
		}

		.submit {
			background-color: #333333;
			color: #FFEBC4;
		}
	}
</style>
<style scoped>
	.container /deep/ .u-tab-item {
		color: #999999 !important;
	}
</style>
